<div class="container full-screen" id="data_mapping">
	<div class="easyui-layout" data-options="fit:true,border:true">
		<div data-options="region:'west',width:250,border:false">
			<label class="mg-bottom-5">数据向导</label>
			<ul id="data_mapping_guide"></ul>
		</div>
		<div data-options="region:'center',border:false" class="pd-left-10">
			<label class="mg-bottom-5">映射表</label>
			<div id="data_mapping_view" class="full-screen overflow-scroll"></div>
		</div>
	</div>
</div>
<script type="text/javascript" src="/static/lib/jsplumb/jsplumb.js"></script>
<script type="text/javascript">
	(function(dataMapping) {
		$.ajaxSetup({
			async:false
		});
		$.extend($.fn.tree.methods, {
			getLevel: function(jq, target) {
				var l = $(target).parentsUntil("ul.tree", "ul");
				return l.length + 1;
			}
		});

	    var instance = jsPlumb.getInstance({
	        DragOptions: { cursor: 'pointer', zIndex: 2000 },
	        Container: "data_mapping_view"
	    });

		$("#data_mapping_guide").tree({
			url: '/static/json/metadata.field.json',
			lines: true
		});
		$('#data_mapping_guide .tree-node').each(function(i, e) {
			if ($('#data_mapping_guide').tree("getLevel", e) == 2) {
				domDraggable($(e));
			}
		});
		$('#data_mapping_view').on('click','.db-table i.fa-trash',function(){
			$(this).parent('table').find('tbody td').each(function(i, e){
				instance.remove($(e).attr('id'));
			});
			$(this).parent('table').remove();
		});

		domDroppable($('#data_mapping_view'), '#data_mapping_guide .tree-node', function(e, source) {
			if ($(source).hasClass('tree-node')) {
				drawTable(source, $(source).draggable('proxy').offset());
			}
		});

		function domDraggable(dom) {
			dom.draggable({
				revert: true,
				proxy: function(source) {
					return $('<div class="proxy"></div>').html($(source).html()).appendTo('body');
				},
				onStartDrag: function() {
					$(this).draggable('options').cursor = 'not-allowed';
				},
				onStopDrag: function() {
					$(this).draggable('options').cursor = 'move';
				}
			});
		}

		function domDroppable(dom, accept, onDropFunc) {
			dom.droppable({
				accept: accept,
				onDragEnter: function(e, source) {
					$(this).addClass('drop-over');
					$(source).draggable('options').cursor = 'move';
				},
				onDragLeave: function(e, source) {
					$(this).removeClass('drop-over');
					$(source).draggable('options').cursor = 'not-allowed';
				},
				onDrop: function(e, source) {
					$(this).removeClass('drop-over');
					if ($.isFunction(onDropFunc)) {
						onDropFunc(e, source);
					}
				}
			});
		}

		function drawTableFromJson(id, x, y) {
			var node = $('#data_mapping_guide').tree('find', id);
			var position = {};
			position.top = x + 170;
			position.left = y + 460;
			drawTable(node.target, position);
		}

		function drawTable(source, position) {
			var cnodes = $('#data_mapping_guide').tree('getChildren', source);
			if (cnodes.length > 0) {
				var fnode = $('#data_mapping_guide').tree('getNode', source);
				if ($('#data_mapping_view_table_' + fnode.id).length > 0) {
					$.messager.alert('提示', '该数据表已经存在！');
					return;
				}
				var table = $('<table id="data_mapping_view_table_' + fnode.id + '" class="db-table"></table>');
				table.append('<thead><tr><td>' + fnode.text + '</td></tr></thead>');
				table.append('<tbody></tbody>');
				for (var i in cnodes) {
					table.find('tbody').append('<tr><td id="data_mapping_view_table_' + fnode.id + '_' + cnodes[i].id + '">' + cnodes[i].text + '</td></tr>');

				}
				table.append('<i class="fa fa-trash"></i>');
				$('#data_mapping_view').append(table);
				$('#data_mapping_view_table_' + fnode.id).draggable({
					handle: $('#data_mapping_view_table_' + fnode.id + ' thead'),
					onDrag: function(e) {
						var d = e.data;
						if (d.left < 10) {
							d.left = 10
						}
						if (d.top < 10) {
							d.top = 10
						}
						$('#data_mapping_view_table_' + fnode.id).attr('data-left', d.left).attr('data-top', d.top);
						instance.repaintEverything();
					}
				});
				$('#data_mapping_view_table_' + fnode.id).css('position', 'absolute').css('left', position.left - 360).css('top', position.top - 92);
				table.find('tbody td').each(function(i, e) {
					domDraggable($(e));
					domDroppable($(e), '.db-table td', function(e, source) {
						if ($(source)[0].tagName == 'TD') {
							if ($(source).attr('id').split('_', 5).sort().toString() == $(e.target).attr('id').split('_', 5).sort().toString()) {
								$.messager.alert('提示', '同一数据表自身不能映射！');
								return;
							}
							instance.connect({
							  source:$(source).attr('id'),
							  target:$(e.target).attr('id'),
							  anchor:[ "Continuous", { faces:["left","right"] }],
							  endpoint:[ "Dot", { radius:2} ],
							  connector:[ "Bezier", { curviness:100 } ]
							});
						}
					});
				});
			}
		}
	})($('#data_mapping'));
</script>